<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移与碰撞</title>
</head>
<body>
<canvas id="mainCanvas"></canvas>
</body>
<script type="importmap">
    {
        "imports": {
            "three": "./js/threejs/three.module.js",
            "three/addons/": "./js/threejs/jsm/"
        }
    }
</script>

<script type="module">
    import * as THREE from 'three';
    import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
    import { DragControls } from 'three/addons/controls/DragControls.js';
    import { TransformControls } from 'three/addons/controls/TransformControls.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
    import {OutlinePass} from 'three/addons/postprocessing/OutlinePass.js';
    import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
    let scene, camera, renderer, leftPress, cube, arrowFront, arrowFrontX, arrowFrontZ;
    let left, right, front, back;
    init();
    helper();
    createBoxer();
    animate();

    function init() {
        // 初始化场景
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById("mainCanvas"),
            antialias: true, // 抗锯齿
            alpha: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);


        // 创建透视相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 30);
        camera.lookAt(0, 0, 0);

        // 参数初始化
        var mouse = new THREE.Vector2();
        var raycaster = new THREE.Raycaster();

        // 环境光
        var ambientLight = new THREE.AmbientLight(0x606060);
        scene.add(ambientLight);
        // 平行光
        var directionalLight = new THREE.DirectionalLight(0xBCD2EE);
        directionalLight.position.set(1, 0.75, 0.5).normalize();
        scene.add(directionalLight);
    }

    function helper() {
        var grid = new THREE.GridHelper(100, 20, 0xFF0000, 0x000000);
        grid.material.opacity = 0.1;
        grid.material.transparent = true;
        scene.add(grid);

        var axesHelper = new THREE.AxesHelper(30);
        scene.add(axesHelper);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        arrowFront.setDirection(cube.getWorldDirection(new THREE.Vector3()).normalize());
        arrowFront.position.copy(cube.position);
        let vect = cube.getWorldDirection(new THREE.Vector3());
        if (front) {
            cube.position.z += vect.dot(new THREE.Vector3(0, 0, 15)) * 0.01;
            cube.position.x += vect.dot(new THREE.Vector3(15, 0, 0)) * 0.01;
        }
    }

    function createBoxer() {
        var geometry = new THREE.BoxGeometry(5, 5, 5);
        var mats = [];
        mats.push(new THREE.MeshPhongMaterial({color: 0x00ff00}));
        mats.push(new THREE.MeshPhongMaterial({color: 0xff0000}));
        cube = new THREE.Mesh(geometry, mats);
        console.log('createBoxer geometry--',geometry)
        // for (let j = 0; j < geometry.faces.length; j++) {
        //     if (j === 8 || j === 9) {
        //         geometry.faces[j].materialIndex = 1;
        //     } else {
        //         geometry.faces[j].materialIndex = 0;
        //     }
        // }
        scene.add(cube);
        arrowFront = new THREE.ArrowHelper(cube.getWorldDirection(), cube.position, 15, 0xFF0000);
        scene.add(arrowFront);
    }

    $(window).mousemove(function (event) {
        event.preventDefault();
        if (leftPress) {
            cube.rotateOnWorldAxis(
                new THREE.Vector3(0, 1, 0),
                event.originalEvent.movementX / 500
            );
            cube.rotateOnAxis(
                new THREE.Vector3(1, 0, 0),
                event.originalEvent.movementY / 500
            );
        }
    });

    $(window).mousedown(function (event) {
        event.preventDefault();
        leftPress = true;

    });

    $(window).mouseup(function (event) {
        event.preventDefault();
        leftPress = false;
    });

    $(window).keydown(function (event) {
        switch (event.keyCode) {
            case 65: // a
                left = true;
                break;
            case 68: // d
                right = true;
                break;
            case 83: // s
                back = true;
                break;
            case 87: // w
                front = true;
                break;
        }
    });

    $(window).keyup(function (event) {
        switch (event.keyCode) {
            case 65: // a
                left = false;
                break;
            case 68: // d
                right = false;
                break;
            case 83: // s
                back = false;
                break;
            case 87: // w
                front = false;
                break;
        }
    });
</script>
</html>